<template>
    <div class="home-edit">
        <a-page-header :title="`${action}存储`" @back="$router.push('/')">
            <template #subtitle>
                <a-radio-group type="button" v-model="activeKey">
                    <a-radio :value="1">基本信息</a-radio>
                    <a-radio :value="2">存储信息</a-radio>
                </a-radio-group>
            </template>
            <template #extra>
                <a-button type="primary" status="success" @click="save">{{ action }}</a-button>
            </template>
        </a-page-header>
        <div class="edit-container">
            <a-form :model="record" v-show="activeKey == 1" layout="vertical">
                <a-form-item label="名称">
                    <a-input v-model="record.name" />
                </a-form-item>
                <a-form-item label="分组">
                    <a-input v-model="record.group" />
                </a-form-item>
                <a-form-item label="描述">
                    <a-textarea auto-size v-model="record.description" />
                </a-form-item>
                <a-form-item label="类型">
                    <a-radio-group v-model="record.type">
                        <a-radio :value="StorageTypeEnum.WEBDAV">WebDAV</a-radio>
                        <a-radio disabled :value="StorageTypeEnum.QINIU">七牛云</a-radio>
                        <a-radio disabled :value="StorageTypeEnum.SFTP">SFTP</a-radio>
                        ...
                    </a-radio-group>
                </a-form-item>
            </a-form>
            <a-form :model="record.webdav" v-show="activeKey == 2 && record.type === StorageTypeEnum.WEBDAV"
                layout="vertical">
                <a-form-item label="地址">
                    <a-input v-model="record.webdav.url" />
                </a-form-item>
                <a-form-item label="用户名">
                    <a-input v-model="record.webdav.username" />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input-password v-model="record.webdav.password" />
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script lang="ts">
import WebStorage from "@/module/storage/entity/WebStorage";
import StorageTypeEnum from "@/module/storage/enumeration/StorageTypeEnum.js";
import { webStorageService } from "@/global/BeanFactory";
import MessageUtil from "@/utils/MessageUtil";
import { toRaw } from "vue";
import { defineComponent } from "vue";

export default defineComponent({
    name: 'home-add',
    data: () => ({
        StorageTypeEnum,
        edit: false,
        activeKey: 1,
        record: {
            id: '',
            name: '',
            group: '',
            description: '',
            sort: 0,
            type: StorageTypeEnum.WEBDAV,
            webdav: {
                url: ''
            }
        } as WebStorage
    }),
    computed: {
        action() {
            return this.edit ? '修改' : '新增';
        }
    },
    created() {
        let id = this.$route.params.id as string;
        if (!id) {
            MessageUtil.error("系统异常");
            this.$router.replace('/');
            return;
        }
        if (id == '0') {
            this.edit = false;
            return;
        }
        let storage = webStorageService.info(id);
        if (!storage) {
            MessageUtil.error("系统异常，该存储不存在");
            this.$router.push('/');
            return;
        }
        this.record = storage;
        this.edit = true

    },
    methods: {
        save() {
            if (this.edit) {
                webStorageService.update(toRaw(this.record));
                MessageUtil.success("修改成功");
                this.$router.push('/');
            } else {

                webStorageService.add(toRaw(this.record));
                MessageUtil.success("新增成功");
                this.$router.push('/');
            }
        }
    }
});
</script>
<style lang="less">
.home-edit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .edit-container {
        position: absolute;
        top: 62px;
        left: 14px;
        right: 14px;
        bottom: 7px;

        .arco-input-wrapper {
            width: 320px;
        }

        .arco-textarea-wrapper {
            width: 320px;
        }

        .arco-select {
            width: 320px;
        }
    }
}
</style>